<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <title></title>
    <link rel="stylesheet" href="../css/index.css"/>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1141259_eg8glln0d1c.css"/>
    <script src="../js/base.min.js"></script>
</head>
<body>
<header id="banner">
    <div flex="cross:center">
        <div class="sousuo" flex="cross:center">
            <i class="iconfont icon-sousuo"></i><input type="text" placeholder="点击输入你想要的内容"/>
        </div>
        <i class="iconfont icon-kefu"></i>
    </div>
    <div flex="">
        <div class="qian">
            <div flex="main:center cross:center">
                <img src="../image/shuaka.png"/>
            </div>
            <p>刷卡收款</p>
        </div>
        <div class="qian">
            <div flex="main:center cross:center">
                <img src="../image/wuka.png"/>
            </div>
            <p>无卡支付</p>
        </div>
        <div class="qian">
            <div flex="main:center cross:center">
                <img src="../image/shangquan.png"/>
            </div>
            <p>附件商圈</p>
        </div>
        <div class="qian">
            <div flex="main:center cross:center">
                <img src="../image/xyk.png"/>
            </div>
            <p>还信用卡</p>
        </div>
    </div>
</header>
<!-- ------------------------------------------------------------------------------------------ -->
<section id="jgq">
    <ul flex="">
        <li flex="dir:top main:center cross:center">
            <i class="iconfont icon-youhuiquan"></i>
            <p>优惠券</p>
        </li>
        <li flex="dir:top main:center cross:center">
            <i class="iconfont icon-liwu"></i>
            <p>推荐有礼</p>
        </li>
        <li flex="dir:top main:center cross:center">
            <i class="iconfont icon-shangcheng1"></i>
            <p>我的商城</p>
        </li>
        <li flex="dir:top main:center cross:center">
            <i class="iconfont icon-youhuiquan1"></i>
            <p>惠买单</p>
        </li>
    </ul>
    <ul flex="">
        <li flex="dir:top main:center cross:center">
            <i class="iconfont icon-qiazhifutuijianbanqia"></i>
            <p>推荐办卡</p>
        </li>
        <li flex="dir:top main:center cross:center">
            <i class="iconfont icon-qian"></i>
            <p>金融理财</p>
        </li>
        <li flex="dir:top main:center cross:center">
            <i class="iconfont icon-jiasuqi"></i>
            <p>极速贷款</p>
        </li>
        <li flex="dir:top main:center cross:center">
            <i class="iconfont icon-ka"></i>
            <p>行用卡申请</p>
        </li>
    </ul>
</section>
<!-- ------------------------------------------------------------------------------------------ -->
<section id="guanggao" flex="main:center cross:center">
    <img src="../image/guanggao.png"/>
</section>
<!-- ------------------------------------------------------------------------------------------ -->
<section id="szmx">
    <div class="biaoti" flex="cross:center">
        <span></span>
        <p>收支明细</p>
    </div>
    <div class="jine" flex="main:justify cross:center">
        <div class="zuo" flex="dir:top main:center cross:center">
            <div flex>
                <span class="span1">￥</span>
                <div flex="cross:bottom">
                    <span class="span2">168.5</span>
                    <p>万</p>
                </div>
            </div>
            <p>本月收款金额</p>
        </div>
        <div class="zhong">

        </div>
        <div class="you" flex="dir:top main:center cross:center">
            <div flex>
                <span class="span1">￥</span>
                <div flex="cross:bottom">
                    <span class="span2">168.5</span>
                    <p>万</p>
                </div>
            </div>
            <p>本月收款金额</p>
        </div>
    </div>
    <button>
        <span>查看详细账单</span>
    </button>
</section>
<!-- ------------------------------------------------------------------------------------------ -->
<footer id="footer" flex="main:justify">
    <div flex="dir:top main:center corss:center">
        <i class="iconfont icon-shouye"></i>
        <p class="p1">首页</p>
    </div>
    <div flex="dir:top main:center corss:center">
        <i class="iconfont icon-licai"></i>
        <p>理财</p>
    </div>
    <div flex="dir:top main:center corss:center">
        <i class="iconfont icon-xiaoxi"></i>
        <p>消息</p>
    </div>
    <div flex="dir:top main:center corss:center">
        <i class="iconfont icon-wode"></i>
        <p>我的</p>
    </div>
</footer>
</body>
</html>